<template>
	<div class="flex box-row-column">
		<div class="flex flex-align-center" style="width: 100%; margin-bottom: 10px">
			<div class="titlezi1"><span v-if="ismust == 1" style="color: red">*</span>{{ labeltitle }}:</div>

			<el-upload
				ref="uploadRef"
				:class="disabled ? 'avatar-uploader' : 'avatar-uploader1'"
				name="file"
				:action="uploadApi"
				:headers="uploadHeaders"
				:accept="gettype"
				:data="uploadData"
				:on-exceed="handleExceed"
				:on-success="handleUploadPdfSuccess"
				:on-error="handleUploadPdfError"
				:on-remove="handleUploadPdfRemove"
				:on-preview="handleUploadPdfPreview"
				:multiple="false"
				:limit="1"
				:file-list="uploadShowPdfList"
				:disabled="!disabled"
			>
				<!-- :before-upload="beforeUpload" 				:auto-upload="false"						:on-change="handleChansge"			:on-change="handleChansge"-->
				<el-button v-if="disabled" type="sucess">上传文件</el-button>
			</el-upload>

			<!-- <div class="fjsmzi ml10">{{ typetitle }}</div> 				:show-file-list="false"-->
		</div>

		<!-- <el-table
			v-if="uploadPdfList.length > 0"
			:data="uploadPdfList"
			stripe
			class="mb20"
			element-loading-background="rgba(0, 0, 0, 0.5)"
			element-loading-text="加载中..."
			header-row-class-name="table-header"
		>
			<el-table-column label="名称" align="center" prop="fileRealName"> </el-table-column>
			<el-table-column label="类型" align="center" prop="fileExtName"> </el-table-column>

			<el-table-column v-if="disabled" label="操作" fixed="right" header-align="center" align="center" width="80">
				<template #default="{ row, $index }">
					<el-icon style="color: #fe6360" @click="handledelete(row, $index)"><Delete /></el-icon>
				</template>
			</el-table-column>
		</el-table> -->
	</div>
</template>
<script setup lang="ts">
import { filePreviewByName } from '@/api/sys/upload'
import { UploadFile } from '@/interface/declare'
import { useUserStore } from '@/store/modules/user'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, nextTick, onMounted, ref, watch } from 'vue'
const userStore = useUserStore()
// const filelist = ref([])
const uploadRef = ref(null)
const uploadApi = `${import.meta.env.MODE === 'development' ? 'http://220.196.89.86:9173' : window.location.protocol + '//' + window.location.host}/JGBStandardWebApi/api/files/upload`
const uploadHeaders = {
	Authorization: userStore.token
}
const props = defineProps({
	typetitle: {
		type: String,
		default: '支持pdf文件'
	},

	suffixType: {
		type: String,
		default: ''
	},
	labeltitle: {
		type: String,
		default: ''
	},
	filelist: {
		type: Array,
		default: () => []
	},
	accept: {
		type: String,
		default: 'application/pdf'
	},
	istable: {
		type: Boolean,
		default: false
	},
	ismust: {
		type: Boolean,
		default: false
	},
	disabled: {
		type: Boolean,
		default: false
	},
	code: {
		type: String,
		default: ''
	}
})

const uploadPdfRef = ref<UploadInstance>()
const uploadPdfList = ref<UploadFile[]>([])
const uploadList = ref<UploadFile[]>([])
const uploadShowPdfList = ref<UploadRawFile[]>([])
const uploadShowList = ref<UploadRawFile[]>([])
const emit = defineEmits<{
	(e: 'success', data: any): void // 上传成功事件
	(e: 'remove', file: any): void // 文件删除事件
}>()
const list = ref([
	{ name: 'aaa', sex: 1 },
	{ name: 'ccc', sex: 1 }
])

watch(
	() => props.filelist,
	(newVal: any, oldVal: any) => {
		nextTick(() => {
			if (props.filelist.length > 0) {
				uploadPdfList.value = props.filelist

				props.filelist.forEach((element: any) => {
					const data = {
						...element,
						name: element.fileRealName
					}
					uploadShowPdfList.value.push(data)

					//	console.log(uploadShowPdfList.value, 'sgsgsg')
				})
			}
		})
	},
	{ immediate: true }
)

const gettype = computed(() => {
	let types = ''
	if (props.suffixType) {
		types = '.' + props.suffixType
	}

	// props.suffixType.replace(/;|，/g, ',')
	return types
})

const uploadData = {
	extCode: props.code,
	remark: props.labeltitle
}
const loading = ref(false)
const handleExceed: UploadProps['onExceed'] = files => {
	ElMessageBox.confirm('只能上传一份文件，若要替换，请先删除已有文件', '温馨提示', {
		showConfirmButton: false,
		cancelButtonText: '知道了',
		type: 'warning'
	})
}

onMounted(() => {
	//console.log(props.filelist, 'sjdijd222222222222222222222222222222222iid')
	//nextTick(() => {
})
const handleUploadPdfPreview = (ruploadFile: any) => {
	if (ruploadFile.systemFileName) {
		filePreviewByName(ruploadFile.systemFileName).then(res => {
			window.open(res.data.url)
		})
	} else {
		filePreviewByName(ruploadFile?.response.data.systemFileName).then(res => {
			window.open(res.data.url)
		})
	}
}

const handleUploadPdfSuccess = (res: any, uploadFile: UploadRawFile) => {
	if (res.code == '200') {
		uploadPdfList.value = []
		uploadPdfList.value.push(res.data)
	} else {
		handleUploadPdfError(res, uploadFile)
	}

	uploadPdfList.value.forEach((element: any) => {
		const data = {
			...element,
			name: element.fileRealName
		}
		uploadShowPdfList.value.push(data)
	})

	emit('success', res.data)

	//console.log(res.data, 'sgsjjjjjpjijjpjjpjjpjop')
}

const handleUploadPdfRemove = (file: UploadRawFile) => {
	uploadPdfList.value = []
	emit('remove', file)
}

const handledelete = (row, index: any) => {
	ElMessageBox.confirm('确定要删除吗?', '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		// uploadPdfList.value.splice(index, 1)

		// uploadShowPdfList.value.splice(index, 1)
		uploadPdfList.value = []
		uploadShowPdfList.value = []
		emit('remove', row)
	})
}
const handleUploadPdfError = (error: Error, uploadFile: UploadRawFile) => {
	ElMessage.error(error.message)
	uploadShowPdfList.value = uploadShowPdfList.value.filter((item: UploadRawFile) => item.uid !== uploadFile.uid)
	//	uploadPdfList.value = uploadPdfList.value.filter((item: UploadRawFile) => item.uid !== uploadFile.uid)
}
</script>

<style lang="scss" scoped>
.card-header-box1 {
	display: flex;

	flex-direction: column;

	overflow-y: scroll;
	height: 100%;

	&::-webkit-scrollbar {
		display: none;
	}
}

.avatar-uploader {
	width: 50%;
}

.avatar-uploader1 {
	width: 50%;
}

::v-deep .avatar-uploader.is-disabled {
	display: none;
}

::v-deep .avatar-uploader1 .el-upload-list {
	margin-top: -5px !important;
}

.titlezi {
	font-size: 16px;
	color: #333;
}

.kuaibj {
	background-color: #f5f6fa;
	padding: 20px;
	border-radius: 6px;
}

.fjsmzi {
	font-size: 12px;
	color: #606266;
	margin-left: 6px;
}

.titlezi1 {
	color: #606266;
	line-height: 32px;
	font-size: 15px;
	margin-right: 12px;

	width: 15%;
}
</style>
